import { CardType, CardTypeList, CardTypeMap, ColorType, ColorTypeMap, ColorTypList, ConanCardSearchRequest, ConanRareList } from "../../models/conan-card.model";

// components/conan-card-filter/conan-card-filter.component.ts
Component({

  /**
   * 组件的属性列表
   */
  properties: {
    defaultSearchRequest: { type: Object, value: {} },
    categories: { type: String, value: '' },
    packages: { type: String, value: '' },
  },

  observers: {
    'defaultSearchRequest': function () {
      const data = this.data.defaultSearchRequest as ConanCardSearchRequest;
      console.log(data)
      this.setData({
        ap: [data.apMin!, data.apMax!],
        apDefault: [data.apMin!, data.apMax!],
        lp: [data.lpMin!, data.lpMax!],
        lpDefault: [data.lpMin!, data.lpMax!],
        cost: [data.costMin!, data.costMax!],
        costDefault: [data.costMin!, data.costMax!],
        category: data.category,
        categoryText: !!data.category ? data.category : '不限',
        package: data.package,
        packageText: !!data.package ? data.package : '不限',
        colorText: !!data.color ? ColorTypeMap[data.color] : '全部颜色',
        color: data.color ?? '',
        typeText: !!data.type ? CardTypeMap[data.type] : '全部类型',
        type: data.type ?? '',
        rareText: !!data.rare ? data.rare : '全部罕见度',
        rare: data.rare ?? '',
      });
      setTimeout(() => {
        this.searchClick();
      }, 300);
    },
    'categories': function () {
      const categories = this.data.categories;
      let categoriesStrs: string[] = [];
      if (!!categories) {
        categoriesStrs = categories.split(',');
      }
      const categoryList = [{ label: "不限", value: '' }];
      for (const cate of categoriesStrs) {
        categoryList.push({
          label: cate, value: cate
        })
      }
      this.setData({ categoryList });
    },
    'packages': function () {
      const packages = this.data.packages;
      let packagesStrs: string[] = [];
      if (!!packages) {
        packagesStrs = packages.split(',');
      }
      const packageList = [{ label: "不限", value: '' }];
      for (const pack of packagesStrs) {
        packageList.push({
          label: pack, value: pack
        })
      }
      this.setData({ packageList });
    },
  },

  /**
   * 组件的初始数据
   */
  data: {
    cost: [0, 8],
    costDefault: [0, 8],
    ap: [0, 7000],
    apDefault: [0, 7000],
    lp: [0, 2],
    lpDefault: [0, 2],
    colorText: '全部颜色',
    colorTypeList: [{ label: "全部颜色", value: '' }, ...ColorTypList],
    colorTypeVisible: false,
    colorType: '',
    categoryText: '不限',
    categoryList: [{ label: "不限", value: '' }],
    categoryVisible: false,
    category: '',
    typeText: '不限',
    typeList: [{ label: "不限", value: '' }, ...CardTypeList],
    typeVisible: false,
    type: '',
    packageText: '不限',
    packageList: [{ label: "不限", value: '' }],
    packageVisible: false,
    package: '',
    rareText: '不限',
    rareList: [{ label: "不限", value: '' }, ...ConanRareList],
    rareVisible: false,
    rare: '',
  },

  /**
   * 组件的方法列表
   */
  methods: {
    searchClick() {
      const data: ConanCardSearchRequest = {
        costMin: this.data.cost[0],
        costMax: this.data.cost[1],
        apMin: this.data.ap[0],
        apMax: this.data.ap[1],
        lpMin: this.data.lp[0],
        lpMax: this.data.lp[1],
        color: !!this.data.colorType ? this.data.colorType as ColorType : undefined,
        type: !!this.data.type ? this.data.type as CardType : undefined,
        category: this.data.category,
        rare: this.data.rare,
        package: this.data.package
      }

      this.triggerEvent('onsearch', JSON.parse(JSON.stringify(data)));
    },

    resetClick() {
      const data = this.data.defaultSearchRequest as ConanCardSearchRequest;
      data.apMin = 0;
      data.apMax = 7000;
      data.lpMin = 0;
      data.lpMax = 2;
      data.costMin = 0;
      data.costMax = 8;
      data.category = '';
      data.color = undefined;
      data.type = undefined;
      data.rare = '';
      this.setData({
        categoryText: '不限',
        category: '',
        colorText: '全部颜色',
        colorType: '',
        type: '',
        typeText: '全部类型',
        rareText: '全部罕见度',
        rare: '',
        packageText: '不限',
        package: '',
        cost: [data.costMin!, data.costMax!],
        ap: [data.apMin!, data.apMax!],
        lp: [data.lpMin!, data.lpMax!],
      });
      this.triggerEvent('onreset', JSON.parse(JSON.stringify(data)));
    },

    onCostRangeChange(e: any) {
      this.setData({
        cost: e.detail.value
      });
    },

    onApRangeChange(e: any) {
      this.setData({
        ap: e.detail.value
      });
    },

    onLpRangeChange(e: any) {
      this.setData({
        lp: e.detail.value
      });
    },

    onPackagePicker() {
      this.setData({
        packageVisible: true
      });
    },

    onPackagePickerCancel() {
      this.setData({
        packageVisible: false
      });
    },

    onPackagePickerConfirm(e: any) {
      this.setData({
        packageText: e.detail.label[0],
        package: !!e.detail.value[0] ? e.detail.value[0] : ''
      });
    },

    onTypePicker() {
      this.setData({
        typeVisible: true
      });
    },

    onTypePickerCancel() {
      this.setData({
        typeVisible: false
      });
    },

    onTypePickerConfirm(e: any) {
      this.setData({
        typeText: e.detail.label[0],
        type: !!e.detail.value[0] ? e.detail.value[0] : ''
      });
    },

    onRarePicker() {
      this.setData({
        rareVisible: true
      });
    },

    onRarePickerCancel() {
      this.setData({
        rareVisible: false
      });
    },

    onRarePickerConfirm(e: any) {
      this.setData({
        rareText: e.detail.label[0],
        rare: !!e.detail.value[0] ? e.detail.value[0] : ''
      });
    },

    onColorPicker() {
      this.setData({
        colorTypeVisible: true
      });
    },

    onColorPickerCancel() {
      this.setData({
        colorTypeVisible: false
      });
    },

    onColorPickerConfirm(e: any) {
      this.setData({
        colorText: e.detail.label[0],
        colorType: !!e.detail.value[0] ? e.detail.value[0] : ''
      });
    },

    onCategoryPicker() {
      this.setData({
        categoryVisible: true
      });
    },

    onCategoryPickerCancel() {
      this.setData({
        categoryVisible: false
      });
    },

    onCategoryPickerConfirm(e: any) {
      this.setData({
        categoryText: e.detail.label[0],
        category: !!e.detail.value[0] ? e.detail.value[0] : ""
      });
    },
  }
})